<template>
  <el-menu active-text-color="#ffd04b" background-color="#545c64" :collapse="system.collapse" :collapse-transition="false" :default-active="route.path" text-color="#fff" router>
    <menu-item v-for="(item, index) in menus" :key="index" :item="item"></menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter, useRoute, type RouteRecordRaw } from 'vue-router';
import { useSystemStore } from '@/stores/index';
import menuItem from './my-menu-item/index.vue';

const router = useRouter();
const route = useRoute();
const system = useSystemStore();
const menus = ref<RouteRecordRaw[]>(router.getRoutes().find((item) => item.name == 'admin')?.children as RouteRecordRaw[]);
</script>

<style lang="scss" scoped>
.el-menu {
  border-right: none;
}
</style>
